<template>
	<view>
		<view class="page">
			<view class="charts-box xb-card">
				<view class="charts-t">
					历史数据表
				</view>
				<qiun-data-charts v-if="showCharts" :canvas2d="true" type="line" :opts="opts" :chartData="chartData"
					:ontouch="true" />
			</view>
		</view>


		<view class="w_grid w_grid_t">
			<text style="justify-self: start;">时间</text>
			<text>起数</text>
			<text>止数</text>
			<text>差值</text>
		</view>

		<view class="w_grid" v-for="(item,index) in dataList" :key="index">
			<text>{{item.currentCheckDate}}</text>
			<text>{{ item.lastValue }}</text>
			<text>{{ item.currentValue }}</text>
			<text>{{ item.currentValue-item.lastValue }}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        meterId:'',
				meterNum: '',
				dataList: [],
				showCharts: false,
				chartData: {
					"categories": [],
					"series": [{
						"name": "差值",
						"data": []
					}]
				},
				"opts": {
          "id":'sas',
					"type": "line",
					"canvasId": "",
					"canvas2d": true,
					"background": "none",
					"animation": false,
					"color": [
						"#08A113"
					],
					"padding": [
						10,
						0,
						0,
						0
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 12,
					"fontColor": "#666666",
					"enableScroll": true,
					"touchMoveLimit": 60,
					"enableMarkLine": true,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"xAxis": {
						"disabled": false,
						"axisLine": true,
						"axisLineColor": "#EEEEEE",
						"calibration": false,
						"fontColor": "#999999",
						"fontSize": 12,
						"rotateLabel": false,
						"itemCount": 4,
						"boundaryGap": "center",
						"disableGrid": true,
						"xAxisHeight": 30,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#999",
						"format": ""
					},
					"yAxis": {
						"disabled": false,
						"disableGrid": true,
						"splitNumber": 5,
						"gridType": "dash",
						"dashLength": 2,
						"gridColor": "#eee",
						"padding": 10,
						"showTitle": false,
						"data": [{
							"axisLineColor": "#eee",
							"calibration": false,
							"fontColor": "#999",
							"fontSize": 12,
							min: 0,
							max: 1000,
							titleOffsetX: '-50',
							unit: '  '
						}]
					},
					"legend": {
						"show": false,
						"position": "top",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 12,
						"fontColor": "#999",
						"lineHeight": 11,
						"hiddenColor": "#999",
						"itemGap": 10
					},
					"extra": {
						"line": {
							"type": "curve",
							"width": 4
						},
						"tooltip": {
							"showBox": true,
							"showArrow": false,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#999",
							"borderOpacity": 0.1,
							"bgColor": "#999",
							"bgOpacity": 0.1,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#eee",
							"fontColor": "#333",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": true,
							"yAxisLabel": true,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 1,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				}
			}
		},
		onLoad({meterId}) {
      this.meterId=meterId
			this.getData()
		},
		methods: {
			getData() {
				this.apis.energyApi.nyCheckMeterList({
          meterId:this.meterId
				}).then(res => {
					this.dataList = res.rows
					let max = 0
					this.dataList.forEach(item => {
            //let feeCycle=this.$u.timeFormat(item.feeCycle,'yyyy-mm')
						this.chartData.categories.push(item.currentCheckDate)
            //this.chartData.categories.push(/\d{4}-\d{1,2}/g.exec(item.currentCheckDate))
						let cha = item.currentValue - item.lastValue
						max = Math.max(max, cha)
						this.chartData.series[0].data.push(cha)
					})
					this.opts.yAxis.data[0].max = Math.ceil(max / 100) * 100
					this.showCharts = true
				})
			}
		}
	}
</script>

<style lang="scss">
	.w_grid {
		width: 100%;
		background-color: #fff;
		padding: 30upx 32upx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
		font-size: 28upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1upx solid #EEEEEE;
	}

	.w_grid_t {
		margin: 20upx 0;
		font-size: 28upx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
		border: none;
	}

	.charts-box {
		width: 100%;
		background-color: #fff;

		.charts-t {
			margin-bottom: 40upx;
			font-size: 28upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;
		}
	}
</style>
